$(document).ready(function() {
	/**
	 * 以下是做tooltip
	 */
	var toolTip = $('<div></div>');
	var arrow = $('<em></em>');
	var tip;

	$('.requireLabel').hover(function() {
		var positionX, positionY;
		//获取气泡应该所在的位置
		positionX = $(this).offset().left + 10;
		positionY = $(this).offset().top - 60;

		//改变tooltip的位置
		toolTip.css({
			backgroundColor: 'rgba(48,144,228,1)',
			position: 'absolute',
			padding: '10px',
			color: 'white',
			borderRadius: "5px",
			top: positionY,
			left: positionX,
			opacity: '0'
		});
		//气泡淡入
		toolTip.animate({
				opacity: .9
			}, 300)
			// toolTip.animate({opacity:'.9'}, '700')
			// index是分别在不同的div,所以要先获取父类
		switch ($(this).parent().index()) {
			case 0:
				tip = $('<span>必填</span>')
				toolTip.append(tip);
				break;
			case 1:
				tip = $('<span>必填</span>')
				toolTip.append(tip);
				break;
			case 2:
				tip = $('<span>必填,必填目前只支持大陆手机号</span>')
				toolTip.append(tip);
				break;
			case 3:
				tip = $('<span>必填,至少8位，同时有数字、大写字母、小写字母</span>')
				toolTip.append(tip);
				break;
			default:
				// alert("出错");
				break;
		}
		//制作箭头
		arrow.css({
			position: 'absolute',
			left: '15px',
			top: '30px',
			width: '0',
			height: '0',
			border: '7px solid rgba(48,144,228,1)',
			borderColor: 'rgba(48,144,228,1) transparent transparent',
			lineHeight: '0',
			fontSize: '0',
		});
		//插入箭头
		toolTip.append(arrow);
		//插入tooltip
		$(this).append(toolTip);
	}, function() {
		toolTip.remove();
		tip.remove();
	});
	/**
	 * 以下是checked了以后,才可点击注册按钮
	 */
	var checkbox = $('#protocol');
	var regButton = $('#regbutton');
	//先让按钮变为不可选
	regButton.disabled = true;
	regButton.css({
		color: '#d0d0d0',
		border: '1px solid #d0d0d0',
		background: '#eee'
	});
	//监听变化
	checkbox.change(function(event) {
		/* Act on the event */
		var isChecked = checkbox.is(':checked');
		if (isChecked) {
			regButton.disabled = false;
			regButton.css({
				color: 'white',
				border: '1px solid rgba(43,124,224,1)',
				background: 'rgba(43,124,224,1)'
			});
		} else {
			regButton.disabled = true;
			regButton.css({
				color: '#d0d0d0',
				border: '1px solid #d0d0d0',
				background: '#eee'
			});
		}
	});


	/**
	 * 以下是验证输入是否正确
	 */
	var isReplaced = false;
	$('#myForm').validate({
		errorPlacement: function(error, element) {
			// Append error within linked label
			// error instanceof String?alert("true"):alert("false");
			var errorPlacement = $('#errorPlace');
			var errorLabelWithMSG = error;
			var errorLabel = $('#errorLabel')

			errorLabelWithMSG.attr({
				id: 'errorLabelWithMSG'
			});

			errorPlacement.show('fast')
			if (isReplaced) {
				// alert("被替换了")
				$('#errorLabelWithMSG').replaceWith(errorLabelWithMSG)
				errorLabelWithMSG.css({
				color: 'red',
				display: 'block',
				height: '75px',
				lineHeight: '75px',
				margin: 'auto 20px',
			});
			} else {
				// alert("没被替换")
				errorLabel.replaceWith(errorLabelWithMSG)
				isReplaced = true
				errorLabelWithMSG.css({
				color: 'red',
				display: 'block',
				height: '75px',
				lineHeight: '75px',
				margin: 'auto 20px',
			});

			}
			
			errorPlacement.css('visibility', 'visible');;



		},
		rules: {
			username: "required",
			email: {
				required: true,
				email: true
			},
			phonenumber: {
				required: true,
				rangelength: [11, 11]
			},
			password: {
				required: true,
				minlength: 8
			}
		},
		messages: {
			username: "请输入用户名",
			email: {
				required: "请输入邮箱",
				email: "请输入正确邮箱"
			},
			phonenumber: {
				required: "请输入电话号码",
				rangelength: "请输入正确长度的号码"
			},
			password: {
				required: "请输入密码",
				minlength: "请输入正确长度的密码"
			}
		},
		success: function() {
			// alert("成功了")
			$('#errorPlace').css('visibility', 'hidden');;
		}



	});



});






















